<template>
	<view class="">
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">店长主页</block>
		</cu-custom>
		<rllr></rllr>
		<view class="margin-top-sm">
			<view class="padding-xs w-25 inline-block">
				<view @tap="toFj" class="flex flex-direction align-center relative bg-blue radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-fangjian"></text>
					</text>
					<text class="text-sm">房间</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{fjnumber}}</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toYy" class="flex flex-direction align-center relative bg-blue radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-daikeyuyue"></text>
					</text>
					<text class="text-sm">预约</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{yynumber}}</text>
				</view>
			</view>
		</view>
		
		
		<view>
			<view class="margin-top padding-sm bg-white text-blue padding-right-xs flex text-bold justify-between align-baseline ">
				<view @tap="loadDz" class=" title">
					<text class="text-xxl  ">
						<text class="iconfont icon-tiyuguan"></text>
					</text>
					<text class="">我的门店【{{mds.length}}】</text>
				</view>
				<view @tap="toNewMd" class="">
					<text class="text-xxl">
						<text class="iconfont icon-xinzeng"></text>
					</text>
				</view>
			</view>
			<view v-if="mds.length > 0" class="bg-white">
				<view class="solid-bottom padding-sm" v-for="(md,index) in mds" :key="index">
					<view class="bg-white shadow">
						<view v-if="md.storeid == ''" class="padding-sm" v-else>
							<view class="flex justify-between align-center padding-xs">
								<text>门店名称：</text>
								<input class="w-75 solid bg-white" v-model="md.sname" />
							</view>
							<view class="flex justify-end align-center padding-xs">
								<button @tap="saveMd(index)" class="cu-btn sm bg-blue shadow-blur round">保存</button>
							</view>
						</view>
						<view v-else class="padding-sm" v-else>
							<view class="flex justify-between align-center padding-xs">
								<text>门店名称：</text>
								<text>{{md.sname}}</text>
							</view>
							<view class="flex justify-between align-center padding-xs">
								<text class="text-blue" v-if="md.flg">营业中</text>
								<text class="text-red" v-else>
									<text>闭店中</text>
									<text class="text-gray margin-left-sm">{{stuFlg[md.stu]}}</text>
								</text>
								
								<view>
									
									<button @tap="toMdEdit(md.storeid)" class="cu-btn sm bg-blue shadow-blur round">编辑</button>
									<button v-if="md.flg" @tap="toMdxx(md.storeid)" class="cu-btn sm bg-blue shadow-blur round margin-left-sm">详细</button>
									<button v-if="md.stu == 'C' || md.stu == 'R' || md.stu == 'J'" @tap="removeMd(md.storeid, index)" class="cu-btn sm bg-red shadow-blur round">删除</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				adz: this.store.state.dz,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				mds: [],
				amount: {},
				stuFlg: {
					'U': '待设置',
					'C': '已认领',
					'R': '已设置',
					'T': '已通过',
					'J': '已驳回',
				},
				fjnumber: 0,
				yynumber: 0,
			}
		},
		created: function() {
			this.init();
		},
		onPullDownRefresh: function() {
			this.init();
			uni.stopPullDownRefresh();
		},
		methods: {
			init: function() {
				this.loadDz();
			},
			// toSet: function() {
			// 	uni.navigateTo({
			// 		url: '/pages/wd/rllr'
			// 	});
			// },
			toMdxx: function(storeid) {
				uni.navigateTo({
					url: "/pages/cdz/md/mdxx?storeid="+storeid
				});
			},
			toFj: function() {
				uni.navigateTo({
					url: "/pages/cdz/fj/list"
				});
			},
			toYy: function() {
				uni.navigateTo({
					url: "/pages/cdz/yy/search"
				});
			},
			toMdEdit: function(storeid) {
				uni.navigateTo({
					url: "/pages/cdz/md/edit?storeid="+storeid
				});
			},
			removeMd: function(storeid, index) {
				this.api("/md/info/remove").send({
					storeid, 
				}).then(data => {
					this.mds.splice(index, 1);
					this.message.info("删除成功");
				});
			},
			newMd: function() {
				this.mds.push({
					storeid: "",
					sname: "",
					dzid: this.adz.dzid,
					stu: "U"
				});
			},
			saveMd: function(index) {
				
				let md = this.mds[index];
				if (md.sname.length == 0) {
					this.message.info("门店名必须输入");
					return;
				} else if (md.sname.length > 20) {
					this.message.info("门店名太长了");
					return;
				}
				
				this.api("/md/info").send({
						astore: this.md,
					}).then(data => {
						this.mds[index] = data.astore;
						this.$forceUpdate();
					});
			},
			loadDz: function() {
				this.mds = [];
				this.api("/dz/get").send({
					dzid: this.adz.dzid
				}).then(data => {
					for (let index in data.stores) {
						let record = data.stores[index];
						if (record.distance) {
							record.distance = this.util.formatDistance(record.distance);
						}
						this.mds.push(record);
					}
					this.fjnumber = data.fjnumber;
					this.yynumber = data.yynumber;
				});
				
			
			},
			toNewMd: function() {
				if (!this.store.state.dz.tx) {
					this.message.info("请先设置人脸");
					return;
				}
				
				if (!this.store.state.dz.dname) {
					this.message.info("请先设置昵称");
					return;
				}
				uni.navigateTo({
					url: "/pages/cdz/md/new"
				});
			}
		}
	}
</script>

<style>
</style>